<script setup lang="ts">
import { ref } from 'vue'
import CollapsiblePanel from './common/CollapsiblePanel.vue'
import ToggleButton from './common/ToggleButton.vue'
import InputField from './common/InputField.vue'
import CopyToClipboard from './common/CopyToClipboard.vue'

// 导入公共样式


// 定义props
interface Props {
  landType?: string // 虽不区分单选和批次但为了保持接口一致性仍需定义
}

withDefaults(defineProps<Props>(), {
  landType: '单独选址'
})

// 表单数据状态定义
const disasterAssessmentForm = ref({
  // 区块相关数据
  位于易发区: '否',
  评估资质等级: '',
  评估单位名称: '',
  评估级别: '',
  组织审查单位: '',
  评估结论: '',
  提出防治工程: '否',
  已出具承诺书: '否',
  项目名称: ''
})

// 生成要复制的文本
const generateCopyText = (): string => {
  let paragraph: string = ''
  
  // 构建区块文本
  paragraph += `〔地质灾害危险性评估〕\n`
  paragraph += `该项目建设区${disasterAssessmentForm.value.位于易发区 === "是" ? '位于' : '不位于'}地质灾害易发区。\n`
  
  if (disasterAssessmentForm.value.位于易发区 === "是") {
    paragraph += `已由建设项目用地单位书面委托具备地质灾害危险性评估${disasterAssessmentForm.value.评估资质等级}级资质的${disasterAssessmentForm.value.评估单位名称}按规定进行了地质灾害危险性评估，评估级别为${disasterAssessmentForm.value.评估级别}级。评估报告已经${disasterAssessmentForm.value.组织审查单位}组织有关专家审查通过，评估结论（建设场地适应性评价结论）为${disasterAssessmentForm.value.评估结论}。评估报告${disasterAssessmentForm.value.提出防治工程 === "是" ? '提出' : '未提出'}应配套建设地质灾害防治工程。建设项目用地单位${disasterAssessmentForm.value.已出具承诺书 === "是" ? '已' : '未'}按照地质灾害危险性评估报告中提出的防治措施，作出了具有法律效力的《关于落实${disasterAssessmentForm.value.项目名称}地质灾害防治措施的承诺书》。`
  }
  
  return paragraph
}
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold text-blue-700 text-center mb-6">地灾评估单元</h1>
    
    <!-- 文件原文（可折叠） -->
    <CollapsiblePanel title="文件原文">
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">一、业务指导处室</h3>
        <p class="text-gray-600">地质勘查管理处</p>
      </div>
      
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">二、审查标准</h3>
        <ol class="list-decimal pl-5 text-gray-600 space-y-2">
          <li>单独选址项目不位于地质灾害易发区的，建设单位不需要对项目进行地质灾害危险性评估。</li>
          <li>单独选址项目位于地质灾害易发区的，建设单位已按规定完成地质灾害危险性评估。</li>
        </ol>
      </div>
    </CollapsiblePanel>
    
    <!-- 审查内容模板（常驻显示） -->
    <div class="border border-gray-200 rounded-lg shadow mb-6 bg-white text-left">
      <div class="bg-gray-50 p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">三、审查内容模板</h2>
      </div>
      
      <div class="p-4">
        <!-- 区块：地质灾害危险性评估 -->
        <div class="section-block blue mb-6">
          <div class="text-gray-700 space-y-3">
            <p>〔地质灾害危险性评估〕</p>
            <p>该项目建设区</p>
            
            <!-- 用户选择判断区 -->
            <div class="my-4">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="disasterAssessmentForm.位于易发区" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">是否位于地质灾害易发区：</label>
              </div>
            </div>
            
            <div v-if="disasterAssessmentForm.位于易发区 === '是'" class="ml-4 pl-4 text-blue-800">
              <p>位于地质灾害易发区。</p>
              <p class="mt-3">已由建设项目用地单位书面委托具备地质灾害危险性评估
                <InputField v-model="disasterAssessmentForm.评估资质等级" placeholder="甲/乙/丙" width="w-16" />
                级资质的
                <InputField v-model="disasterAssessmentForm.评估单位名称" placeholder="评估单位名称" width="w-48" />
                按规定进行了地质灾害危险性评估，评估级别为
                <InputField v-model="disasterAssessmentForm.评估级别" placeholder="一/二/三" width="w-16" />
                级。评估报告已经
                <InputField v-model="disasterAssessmentForm.组织审查单位" placeholder="组织审查单位" width="w-48" />
                组织有关专家审查通过，评估结论（建设场地适应性评价结论）为
                <InputField v-model="disasterAssessmentForm.评估结论" placeholder="适宜/基本适宜/适宜性差/不适宜" />
                。
              </p>
              
              <div class="flex items-center mt-3">
                <ToggleButton 
                  v-model="disasterAssessmentForm.提出防治工程" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">评估报告是否提出应配套建设地质灾害防治工程：</label>
              </div>
              
              <div class="flex items-center mt-3">
                <ToggleButton 
                  v-model="disasterAssessmentForm.已出具承诺书" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">建设项目用地单位是否已出具承诺书：</label>
              </div>
              
              <p class="mt-3">建设项目用地单位{{ disasterAssessmentForm.已出具承诺书 === "是" ? '已' : '未' }}按照地质灾害危险性评估报告中提出的防治措施，作出了具有法律效力的《关于落实
                <InputField v-model="disasterAssessmentForm.项目名称" placeholder="项目名称" />
                地质灾害防治措施的承诺书》。
              </p>
            </div>
            
            <div v-else class="ml-4 pl-4 text-blue-800">
              <p>不位于地质灾害易发区。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 复制按钮和显示复制的文本内容 -->
    <CopyToClipboard :text="generateCopyText()" />
  </div>
</template>

<style scoped>
/* 组件特定样式保留 */
</style>